Vue Js Break,Skip forrach loop : In Vue.js, you can use the v-for directive to render a list of items based on an array. The v-for directive is used to loop through an array or object and render a block of HTML code for each item.
Sometimes, you may want to break the loop early, before it has completed its full iteration. In Vue.js, you can use the break statement to accomplish this. However, it’s important to note that break is not supported in the template syntax of Vue.js. In this tutorial we will learn how to break and skip foreach loop
How to break foreach loop in Vue Js?
- The HTML template contains a table with a tbody element that uses the “v-for” directive to loop over an “items” array.
- The “v-for” directive is set to display only the first five items in the “items” array using the “v-if” directive with a condition that “index < 5”.
- The tbody element displays the index of the item in the first column, the name in the second column and the salary in the third column.
- A template element is used inside the tbody to display a message “End of the list” when the index reaches 4 (which would be the fifth item in the list).
- The “key” attribute is set to “index” to ensure that Vue can efficiently track changes in the list.
- The script section initializes a new Vue instance by passing it an object with the following properties: a. The “el” property specifies the root element of the application and sets it to the element with the id “app”. b. The “data” property returns an object that defines the state of the application, including the “items” array with the names and salaries of employees. c. The “data” property is also the place where the state of the application can be updated and changes can be observed by the application.
- The code creates a table with a header and several rows of data. The header displays the index number, name, and salary of the items in the table. The table only displays the first five items in the “items” array and displays a message “End of the list” when the index reaches 4.
Vue Js Break foreach loop | Example
<div id="app">
<table>
<tbody v-for="(item, index) in items" v-if="index < 5" :key="index">
<tr>
<td>{{index}}</td>
<td> {{ item.name }}</td>
<td> {{item.salary}}</td>
</tr>
<template v-if="index === 4">
<p>End of the list</p>
</template>
</tbody>
</table>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
items: [
{ name: "John Doe", salary: 50000 },
{ name: "Jane Doe", salary: 55000 },
{ name: "Michael Johnson", salary: 65000 },
{ name: "David Brown", salary: 45000 },
{ name: "Sarah Miller", salary: 55000 },
{ name: "Chris Davis", salary: 52000 },
{ name: "Jessica Wilson", salary: 60000 },
{ name: "Brian Anderson", salary: 56000 },
{ name: "Lauren Taylor", salary: 67000 },
{ name: "Kevin Chen", salary: 71000 },
{ name: "Emily Davis", salary: 68000 },
{ name: "Andrew Martinez", salary: 69000 },
{ name: "Rachel Lee", salary: 61000 },
{ name: "Thomas Smith", salary: 50000 },
{ name: "Elizabeth Wilson", salary: 63000 }
]
};
},
})
</script>
Output of above example
How to skip forEach loop in Vue Js?
This code creates a Vue.js application with a component that displays a list of items. The component uses a v-for directive to loop over the items array in the component’s data object and displays each item’s name along with its index in the list.
The component also uses a v-if directive to check the result of the breakLoop method, which takes the current iteration’s index as its argument. If the breakLoop method returns true for a given index, the component will not display the corresponding item.
The breakLoop method checks if the given index is included in the skipIndices array and returns true if it is, and false otherwise. In this case, the indices that will cause the component to skip displaying the corresponding item are 2, 5, and 9.
Vue Js Skip foreach loop | Example
<div id="app">
<div v-for="(item, index) in items" v-if="!breakLoop(index)">
{{index}} {{ item.name }}
</div>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
items: [
{ name: "John Doe" },
{ name: "Jane Doe" },
{ name: "Michael Johnson" },
{ name: "David Brown" },
{ name: "Sarah Miller" },
{ name: "Chris Davis" },
{ name: "Jessica Wilson" },
{ name: "Brian Anderson" },
{ name: "Lauren Taylor" },
{ name: "Kevin Chen" },
{ name: "Emily Davis" },
{ name: "Andrew Martinez" },
{ name: "Rachel Lee" },
{ name: "Thomas Smith" },
{ name: "Elizabeth Wilson" }
]
};
},
methods: {
breakLoop(index) {
let skipIndices = [2, 5, 9];
if (skipIndices.includes(index)) {
return true;
}
return false;
}
}
})
</script>
Output of above example
